<!-- Table Handle -->
<!-- Author: Edwin -->
<template>
  <div>
    <div class='handle-style'>
      <!-- <el-button size="mini" v-if="isShowModifyBtn()"
                         class="edit-btn adjust-btn"
                         style="width:28px;height:28px;font-size:14px;padding: 0px 0px;border:1px solid #FFF;">
                         <i class="cuifont icon_adjust_time"  @click.stop="modifyTimeEntry"></i>
                         </el-button> -->
      <div v-if="isShowModifyBtn()"
           class="cuifont icon_adjust_time cursor_pointer"
           style="color:#7B7B7B"
           @click.stop="modifyTimeEntry"></div>
      <!-- <el-button size="mini" v-if="isShowApproveBtn()"
                         class="edit-btn adjust-btn"
                         style="width:28px;height:28px;font-size:14px;padding: 0px 0px;border:1px solid #FFF;">
                         <i class="cuifont icon_approve"  @click.stop="approveTimeEntry"></i>
                         </el-button> -->
      <div v-if="isShowApproveBtn()"
           class="cuifont icon_approve cursor_pointer"
           style="color:#7B7B7B"
           @click.stop="approveTimeEntry"></div>
    </div>
    <EditTimeEntryComponent ref="modify-time-entry-dialog"
                            :itemInfo="$data.data"
                            dialogType='record'
                            @initOther='initTableData' />
    <EditTimeEntryComponent ref="approve-time-entry-dialog"
                            :itemInfo="$data.data"
                            dialogType='record'
                            :isApprove='true'
                            @initOther='initTableData' />
  </div>
</template>

<script>
import thisStore from '@/store'
import i18n from '@/i18n'
import EditTimeEntryComponent from '../edit-time-entry'
import { BridgeComponentForAttendance } from '../BridgeComponentForAttendance'

export default {
  components: { EditTimeEntryComponent },
  data () {
    return {

    }
  },
  computed: {
    nowUserId () {
      return thisStore.state.user.id
    },
    exceptionUserId () {
      return this.$data.data.column.dict.exception_value || this.$data.data.column.adminUserId
    },
    approverUserList () {
      return this.$data.data.column.dict.approvers || []
    }
  },
  methods: {
    modifyTimeEntry () {
      this.$refs['modify-time-entry-dialog'].openDialog()
    },
    approveTimeEntry () {
      this.$refs['approve-time-entry-dialog'].openDialog()
    },
    initTableData () {
      BridgeComponentForAttendance.$emit('initRecordList')
    },
    i18nT (key) {
      return i18n.t(key)
    },
    isShowModifyBtn () {
      // $data.data.showModify || ( isAdmin && $data.data.status === null ) || $data.data.managerUserId === nowUserId
      if (this.$data.data.userId === this.nowUserId && this.$data.data.status === null) {
        return true
      } else {
        return false
      }
    },
    isShowApproveBtn () {
      if (this.$data.data.status !== 'Pending approve') return false;
      if ((!this.$data.data.managerUserId && this.approverUserList.includes('0000000000'))||!this.approverUserList.length) {
        if (this.exceptionUserId && this.exceptionUserId === this.nowUserId) return true
      } else {
        if (Array.isArray(this.$data.data.dataContent)) {
          if (this.approverUserList.includes(this.nowUserId) && !this.$data.data.dataContent.includes(this.nowUserId)) return true;
          if (this.approverUserList.includes('0000000000') && this.$data.data.managerUserId === this.nowUserId && !this.$data.data.dataContent.includes(this.$data.data.managerUserId)) return true;
        } else {
          if (this.approverUserList.includes(this.nowUserId)) return true;
          if (this.approverUserList.includes('0000000000') && this.$data.data.managerUserId === this.nowUserId) return true;
        }
      }
      return false
    },
  }
}
</script>

<style scoped lang="scss">
.handle-style {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cursor_pointer {
  cursor: pointer;
}
</style>
